<template>
  <div class="cs-page-container">

    <div class="cs-filter-container">
      <el-input
        v-model.trim="listQuery.userId"
        clearable
        placeholder="用户ID"
        style="width:100px"
      />
      <el-select
        v-model="listQuery.read"
        placeholder="已阅/未阅"
        filterable
        style="width:100px"
        clearable
      >
        <el-option label="未阅" :value="0" />
        <el-option label="已阅" :value="1" />
      </el-select>
      <el-select
        v-model="listQuery.gender"
        clearable
        filterable
        placeholder="性别"
        style="width:100px"
      >
        <el-option label="男" value="1" />
        <el-option label="女" value="2" />
        <el-option label="未知" value="0" />
      </el-select>
      <el-select
        v-model="listQuery.sceneType"
        placeholder="场景"
        filterable
        style="width:100px"
      >
        <el-option label="头像" :value="0" />
        <el-option label="形象墙" :value="1" />
        <el-option label="封面" :value="2" />
        <el-option label="真人认证" :value="3" />
        <el-option label="动态图片" :value="4" />
        <el-option label="im文字" :value="6" />
        <el-option label="im图片" :value="7" />
        <el-option label="视频截图" :value="8" />
        <el-option label="动态文字" :value="9" />
        <el-option label="动态评论" :value="10" />
        <el-option label="点播视频截图" :value="11" />
        <el-option label="随机视频截图" :value="12" />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy-MM-dd"
        @change="daterangeChangedTimestamp"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索
      </el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置
      </el-button>
    </div>
    <div style="margin:10px 0">
      <el-button
        type="warning"
        @click="onHandleAll('1')"
      >批量已阅
      </el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 300px)'"
        border
        fit
        size="small"
        :row-key="row => row.id"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        @selection-change="handleSelectionChange"
      >
        >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          align="center"
          label="日期"
          prop="createTime"
        >

          <template slot-scope="{ row }">
            <span>{{ row.createTime | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="用户ID"
          prop="uid"
        >

          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.uid" />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="性别"
        >
          <template slot-scope="{row}">{{ row.gender|gender }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="内容"
          width="240"
        >
          <template slot-scope="{row}">
            <img
              v-if="row.type === 0"
              :src="row.content"
              width="100"
              style="cursor:pointer"
              title="点击放大"
              @click="zoomImage(row.content)"
            >
            <span v-else>{{ row.content }}</span>
            <div v-if="row.chatId">监控状态: {{ row.monitoringStatus ? "开启" : "关闭" }}</div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="场景"
        >
          <template slot-scope="{row}">{{ row.sceneType | sceneType }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="场景ID"
        >
          <template slot-scope="{row}">{{ row.sceneId }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="鉴黄分数"
        >
          <template slot-scope="{row}">{{ row.rate }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          width="160"
        >
          <template v-if="!row.read" slot-scope="{row}">
            <el-button
              type="primary"
              size="mini"
              @click="onVerifyRow(row,'1')"
            >已阅</el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="更多"
        >
          <template v-if="row.chatId" slot-scope="{row}">
            <a target="_blank" :href="row.chatId | filterHref('/anchor/video-thumb-all?id=')">
              查看全部
            </a>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
    <ImageViewer
      :visible.sync="showImage"
      :url="imageUrl"
    />
  </div>
</template>

<script>
  import TablePagination from '@/components/TablePagination'
  import ImageViewer from '@/components/ImageViewer'

  import { xhrIllegalList, xhrIllegalRead } from '@api/anchor'
  import AnchorMixin from '../../mixin'

  export default {
    name: 'RoleList',
    components: { TablePagination, ImageViewer },

    filters: {
      sceneType(val) {
        const obj = {
          0: '头像',
          1: '形象墙',
          2: '封面',
          3: '真人认证',
          4: '动态图片',
          6: 'IM文字',
          7: 'IM图片',
          8: '视频截图',
          9: '动态文字',
          10: '动态评论',
          11: '点播视频截图',
          12: '随机视频截图',
          13: '搭讪审核'
        }
        return obj[val]
      },
      forbidState(val) {
        const obj = {
          0: '正常',
          1: '已封号',
          2: '禁聊'
        }
        return obj[val]
      },
      identifyType(val) {
        const obj = {
          0: '未认证',
          1: '真人认证',
          2: '主播认证'
        }
        return obj[val]
      }
    },
    mixins: [AnchorMixin],
    data() {
      return {
        list: [],
        total: 0,
        listQuery: {
          userId: null,
          read: null,
          gender: null,
          sceneType: null,
          page: 1,
          offset: 0,
          limit: 100
        },
        daterangeValue: '',
        showImage: false,
        imageUrl: '',
        selectRows: []
      }
    },

    created() {
      this.doSearch()
    },
    methods: {
      doSearch() {
        if (!this.validateParams(this.listQuery)) {
          return
        }
        xhrIllegalList(this.listQuery)
          .then(resp => {
            this.list = resp.data.list
            this.total = resp.data.count
            this.listLoading = false
          })
          .catch(err => {
            this.$message.error(err)
            this.listLoading = false
          })
      },
      zoomImage(url) {
        this.showImage = true
        this.imageUrl = url
      },
      handleSelectionChange(rows) {
        this.selectRows = rows
      },
      onHandleAll(status) {
        if (!this.selectRows.length) {
          this.$message.warning('请选择一条数据')
        } else {
          const ids = []
          this.selectRows.forEach(item => {
            ids.push(item.id)
          })
          xhrIllegalRead(ids).then(resp => {
            this.doSearch()
          })
        }
      },
      onHandle(row) {
        // todo jump to.
      },
      onVerifyRow(row) {
        xhrIllegalRead([row.id]).then(resp => {
          this.doSearch()
        })
      }
    }
  }
</script>
